<template>
  <div class="orderDetail">
    <iu-header>
      <template #left>
        <x-icon
          @click="spotCheckView"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <template #title>
        出库单详情
      </template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="cate-nfo">
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-title">领用部门：</div>
          <div class="info-value">
            {{ detail.departmentName || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">安装设备：</div>
          <div class="info-value">
            {{ detail.deviceName || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">领&nbsp;用&nbsp;人：</div>
          <div class="info-value">
            {{ detail.receiveOperatorName || "" }}
          </div>
        </div>
      </div>
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-title">备件名称：</div>
          <div class="info-value">
            {{ detail.sparePartName || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">备件型号：</div>
          <div class="info-value">
            {{ detail.sparePartModel || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">厂家供应商：</div>
          <div class="info-value">
            {{ detail.manufacturer || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">领出时间：</div>
          <div class="info-value">
            {{ detail.outRepertoryTime | formatDate("YYYY-MM-DD HH:mm") }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">出库数量：</div>
          <div class="info-value">
            {{ detail.outRepertoryCount || "" }} 件
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：</div>
          <div class="info-value">
            {{ detail.price || "" }} 元
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">质 保 期：</div>
          <div class="info-value">
            {{ detail.warrantyPeriod || "" }} 月
          </div>
        </div>
      </div>
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-title">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</div>
          <div class="info-value">
            {{ detail.remark || "" }}
          </div>
        </div>
      </div>
    </div>
    <div class="modify">
      修改记录
    </div>
    <div class="cate-nfo">
      <div class="info-list" v-for="(item,index) in editRecords" :key="index">
        <div class="info-list-item">
          <div class="info-title">{{item.operatorType === 1?"提 交 人：":"修 改 人："}}</div>
          <div class="info-value">
            {{ item.operatorName || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">{{item.operatorType === 1?"创建时间：":"修改时间："}}</div>
          <div class="info-value">
            {{ item.createTime | formatDate }}
          </div>
        </div>
      </div>
    </div>
    <div class="add-btn">
      <div class="btn" @click="eventAdd">修改</div>
    </div>
  </div>
</template>

<script>
import { TransferDom } from "vux";
import iuHeader from "@/components/common/header/index";
import SpotCheckDao from "@/daos/spotCheckDao";

export default {
  name: "outboundDetail",
  directives: {
    TransferDom
  },
  inject: ["backToHomepage"],
  components: {
    iuHeader
  },
  data() {
    return {
      buttonShow: false,
      detail: {},
      chartData: [],
      editRecords: [],
      title: "用水详情",
      imgUrl: "",
      curMeterValue: "",
      showDialogImg: false,
      showMore: false,
      id: 0,
      status: 0,
      type: 1
    };
  },
  activated() {
    this.id = this.$route.query.id || 0;
    this.getOutboundOrderDetails(this.id);
    this.getOutboundOperatorLog(this.id);
  },
  methods: {
    spotCheckView() {
      this.$router.go(-1)
    },
    getOutboundOrderDetails(id) {
      SpotCheckDao.getOutboundOrderDetails(id, res => {
        if (res) {
          this.detail = res;
        }
      });
    },
    getOutboundOperatorLog(id) {
      SpotCheckDao.getOutboundOperatorLog(id, res => {
        if (res) {
          this.editRecords = res.reverse();
        }
      });
    },

    eventAdd() {
      this.$router.push({
        name: "outboundAdd",
        query: {
          id: this.detail.id
        }
      });
    },
    showImage(item) {
      this.imgUrl = item.url;
      this.showDialogImg = true;
    }
  }
};
</script>
<style lang="less">
// .info-list {
//   .vux-table.vux-table-bordered::before {
//     background-color: #c7c7c7;
//   }
//   .vux-table::after {
//     background-color: #c7c7c7;
//   }
// }
</style>
<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transform: translateY(0);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(-140%);
}

.orderDetail {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background-color: #18182c;
  &.show-more-open {
    overflow: hidden;
  }
  .energy-title {
    height: 44px;
    background: #18182c;
    padding: 0 15px;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    position: relative;
    .backHistory {
      font-size: 26px;
      color: #fff;
    }
    .nav-left {
      display: flex;
      align-items: center;
    }
    .nav-center {
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
    .nav-border-left {
      border-left: 2px solid #fff;
      height: 16px;
    }
    .nav-right {
      position: relative;
      // width: 30px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .paidan {
        margin-top: -8px;
        i {
          font-size: 26px;
        }
      }
    }
  }
  .table-chart {
    color: #fff;
    th {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.5);
      text-align: center;
      padding: 8px 0;
    }
    th:nth-child(4) {
      width: 150px;
    }
    td {
      font-size: 14px;
      text-align: center;
      box-sizing: border-box;
      padding: 8px 0;
      // border-bottom: 1px solid #ebeef5;
    }
    td,
    th {
      border-right: 1px solid #c0c4cc;
    }
    td:nth-child(1),
    th:nth-child(1) {
      border-left: 1px solid #c0c4cc;
    }
    th {
      border-top: 1px solid #c0c4cc;
    }
    td,
    th {
      border-bottom: 1px solid #c0c4cc;
    }
  }

  .MoreDataP {
    background: #22233f;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: transform 0.3s ease-in-out;
    // transform: translateY(-140%);
    input {
      &::placeholder {
        color: gray !important;
      }
    }
    .nav-center {
      font-size: 16px;
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
    .MoreDataPInner {
      width: 100%;
      color: #ffffff;
    }
    &.show {
      // display: block;
      transform: translateY(0);
    }
    &.hide {
      // display: none;
      transform: translateY(-140%);
    }
    .searchItem {
      padding: 0 15px;
      margin-bottom: 10px;
      &.addP {
        padding-bottom: calc(~"100vh - 400px") !important;
      }
      .title {
        font-size: 16px;
        margin: 8px 0;
      }
      .inner {
        input[type="text"] {
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          background: #292a4d;
          width: 100%;
          margin-bottom: 12px;
          color: #fff;
          padding: 0 8px;
          transition: background 0.3s ease-in-out;
          &:focus {
            background: #383a69;
          }
          &::placeholder {
            line-height: 30px;
          }
        }

        .time {
          display: flex;
          align-items: center;
          font-size: 16px;
          padding: 0 4px 4px;
          background: #292a4d;
          .time-text {
            width: 20px;
            padding: 0 3px;
            text-align: center;
          }
          .time-span {
            flex: 1;
            padding: 2px 0;
            text-align: center;
            border-bottom: 1px solid #dedede;
          }
        }
      }
    }

    .BtnGroup {
      display: flex;
      width: 100%;
      height: 44px !important;
      line-height: 44px !important;
      transition: 0.3s all;
      margin-top: 32px;
      div {
        text-align: center;
        height: 44px !important;
        border-top: 1px #3967dc solid;
        border-bottom: 1px #3967dc solid;
      }
    }
    .btn-reset {
      flex: 1;
      background: #22233f;
      padding: 0 15px;
      border-radius: 0;
      color: #456de6;
      line-height: 44px !important;
      transition: 0.3s all;
      &.active {
        background: #456de6;
        color: #fff;
      }
    }
    .btn-over {
      flex: 2;
      background: #3967dc;
      padding: 0 15px;
      color: #fff;
      border-radius: 0;
      line-height: 44px !important;
      transition: 0.3s all;
      &.active {
        background: #6e92ff;
      }
    }
  }
}
.modify {
  font-size: 16px;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.5);
}
.cate-nfo {
  height: auto;
  // min-height: calc(~"100vh" - 80px);
  padding: 0 16px 8px;
  background-color: #18182c;

  .info-list {
    background: #22233f;
    padding: 8px 0;
    margin: 8px 0;
    // min-height: 260px;
    border-radius: 4px;
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      margin: 8px 0;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      padding: 0 8px;
      // margin-right: 30px;
      width: 100px;
      text-align: left;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
    .modify-btn {
      font-size: 14px;
      margin-left: 8px;
      color: gray;
    }
    .warning {
      color: #ff2c2c;
    }
  }
}

.add-btn {
  width: 100%;
  // position: absolute;
  // bottom: 8px;
  padding: 8px;
  background: #1b1c32;
  .btn {
    width: 80%;
    margin: 0 auto;
    padding: 8px 0;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    background: #3967dc;
    border-radius: 5px;
  }
}
</style>
<style lang="less">
.energy-img-dialog {
  .img-close {
    text-align: right;
    margin-right: 24px;
    margin-top: 30px;
  }
  .show-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
